<!-- template必须, 只能有一个根标签, 影响渲染到页面的标签结构 -->
<template>
  <div>
    <!-- 双大括号，可以把Vue变量直接显示在标签内 -->
    <div>欢迎使用vue</div>
    <!-- 1、插值表达式 -->
    <h1>{{ msg }}</h1>
    <h2>{{ obj.name }}</h2>
    <h3>{{ obj.age > 18 ? "成年" : "未成年" }}</h3>
  </div>
</template>

<!-- js相关 -->
<script>
export default {
  name: "App",

  data() {
    // 格式固定, 定义vue数据之处   data函数内, return的对象, 对象内的key就是变量名
    return {
      // key相当于变量名
      msg: "hello, vue",
      obj: {
        name: "小vue",
        age: 5,
      },
    };
  },
};
</script>

<!-- 当前组件的样式, 设置scoped, 可以保证样式只对当前页面有效 -->
<style scoped>
</style>